{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data</title>
    <script src="{% static 'plugins/echarts.min.js' %}"></script>
    <script src="{% static 'js/jquery.js' %}"></script>
</head>
<body>
<div id = "main" style="width: 1500px; height: 600px; border: 1px solid gray;"></div>
<script>
    $(function (){
        // 发送Ajax请求
        data = {
            n: 20,
            offset: 0
        }
        function loop() {
            $.get('http://127.0.0.1:8000/get_data/', data, function (res){
                //数据展示
                let myChart = echarts.init(document.getElementById('main'))
                let option = {
                    title: {text: 'LOL人气主播排行展示'},
                    tooltip: {},
                    legend: {
                        data: ['人气指数']
                    },
                    xAxis: {
                        data:res.author
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '人气指数',
                            type: 'bar',
                            data: res.hot_num
                        }
                    ]
                }
                myChart.setOption(option)
            })
            console.log(data.offset)
            data.offset+=20
        }
        setInterval(loop, 1000)
    })
</script>


</body>
</html>